{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 10px 0;
    }
    .dataTable {
        min-width: 800px;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        text-align: center;
    }
    .filter-group {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
    }
</style>
<script>
    // 全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selall = document.getElementById('selall');
        const checkboxes = document.querySelectorAll('input[name="ids"]');
        
        selall.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    });

    function doDel(url) {
        if (confirm("确定删除该饮食计划吗？")) {
            window.location.href = url;
        }
    }
</script>

<!-- 内容头部 -->
<section class="content-header">
    <h1>
        饮食计划管理
        <small>饮食计划列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">饮食计划管理</a></li>
        <li class="active">饮食计划列表</li>
    </ol>
</section>

<!-- 正文区域 -->
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">饮食计划列表</h3>
        </div>
        <div class="box-body">
            <div class="filter-group">
                <!-- 新增按钮 -->
                <button type="button" class="btn btn-default">
                    <a href="{% url 'myadmin_dietplan_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加计划</a>
                </button>
                
                <div class="box-tools pull-right">
                        <form method="get" action="{% url 'myadmin_dietplan_index' 1 %}" class="input-group input-group-sm" style="width: 300px;">
                            <input type="text" name="search" class="form-control pull-right" 
                                   placeholder="搜索计划名称、用户名或备注" 
                                   value="{{ search_keyword|default:'' }}">
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                {% if search_keyword %}
                                <a href="{% url 'myadmin_dietplan_index' 1 %}" class="btn btn-default"><i class="fa fa-times"></i></a>
                                {% endif %}
                            </div>
                        </form>
                </div>
            </div>

            <div class="table-box">
                <table class="table table-bordered table-striped dataTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selall"></th>
                            <th>计划ID</th>
                            <th>计划名称</th>
                            <th>开始日期</th>
                            <th>更新日期</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for plan in plan_list %}  <!-- 修复变量名：planlist → plan_list -->
                        <tr>
                            <td><input type="checkbox" name="ids" value="{{ plan.plan_id }}"></td>
                            <td>{{ plan.plan_id }}</td>
                            <td>{{ plan.plan_name }}</td>
                            <td>{{ plan.created_at|date:"Y-m-d" }}</td>
                            <td>{{ plan.updated_at|date:"Y-m-d" }}</td>
                            <td>{{ plan.notes|truncatechars:20|default:'-' }}</td>
                            <td>
                                <a href="{% url 'myadmin_dietplan_edit' plan.plan_id %}" class="btn btn-xs btn-primary">编辑</a>
                                <a href="{% url 'myadmin_dietplan_detail' plan.plan_id %}" class="btn btn-xs btn-info">详情</a>
                                <a onclick="doDel('{% url 'myadmin_dietplan_delete' plan.plan_id %}')" class="btn btn-xs btn-danger">删除</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="7">暂无饮食计划数据</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                <ul class="pagination">
                    <li>
                        <a href="{% url 'myadmin_dietplan_index' pIndex|add:-1 %}?search={{ search_keyword }}" 
                            {% if pIndex == 1 %}class="disabled"{% endif %}>&laquo;</a>
                    </li>
            
                    {% for p in plan_list.paginator.page_range %}
                        <li {% if p == pIndex %}class="active"{% endif %}>
                            <a href="{% url 'myadmin_dietplan_index' p %}?search={{ search_keyword }}">{{ p }}</a>
                         </li>
                    {% endfor %}
            
                    <li>
                        <a href="{% url 'myadmin_dietplan_index' pIndex|add:1 %}?search={{ search_keyword }}" 
                            {% if pIndex == total_pages %}class="disabled"{% endif %}>&raquo;</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}